<template>
  <div class="sub-main-taicang-view">
    <div class="taicang-select">
      <commonCard :title="name" iconName="login" canClose @close="closeCard">
        <div class="select-taicang-card-content">
          <div class="taicang-form-wrap">
            <div class="left">
              <el-button text  @click="showUser()">用户管理</el-button>
            </div>
          </div>
          <div class="taicang-form-wrap mg-top-12">
            <div class="left">
              <el-button text @click="showPerson">个人中心</el-button>
            </div>
          </div>
          <div class="taicang-form-wrap mg-top-13">
            <div class="left">
              <el-button text @click="exit">退出</el-button>
            </div>
          </div>
        </div>
      </commonCard>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import commonCard from '@/components/commonCard/index.vue'
import {useRouter} from "vue-router";

export default defineComponent({
  props:['loginName','passWord'],
  components: {commonCard},
  emits: ['closeCard'],
  setup(props, context) {
    const router = useRouter()
    const name=ref('你好,'+props.loginName)
    //显示用户管理
    const showUser = () => {
      router.push({
        name: "userManagement",
        // params: {
        //   userType: props.userType,
        //   userLocation: props.userLocation,
        //   loginName:props.loginName,
        //   passWord:props.passWord
        // }
      })
    }
    //显示个人中心
    const showPerson = () => {
      router.push({
        name: "personalCenter",
        params: {
          loginName: props.loginName,
          passWord: props.passWord
        }
      })
    }
    //退出
    const exit =()=>{
      localStorage.clear()
      router.push({
        path: "/landpointtc",
      })
    }

    const closeCard = () => {
      context.emit("closeCard")
    }
    return {
      closeCard,
      showUser,
      showPerson,
      exit,
      name
    }
  }
})

</script>


<style lang="scss">
.sub-main-taicang-view {
  position: absolute;
  top: 0;

  .taicang-select {
    pointer-events: auto;
    width: 320px;
    min-height: 244px;
    box-sizing: border-box;
    left: 720px;
    position: absolute;

    .el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover{
      background-color: #71a0ff;
    }
    .select-taicang-card-content {
      .taicang-form-wrap {
        display: flex;
        justify-content: center;
        .el-button.is-text{
          color: white;
        }


        .left {
          width: 64px;
          margin-right: 12px;
          letter-spacing: 0;
          color: rgba(240, 245, 255, 0.95);
          text-align: right;
        }

        .el-select .el-input__inner {
          color: white;
        }
      }

      .taicang-login-btn {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin-top: 30px;

        .btn {
          width: 48px;
          text-align: center;
          line-height: 24px;
          height: 24px;
          border-radius: 3px;
          cursor: pointer;
        }

        .btn-text {
          margin-right: 12px;
          border: 1px solid rgba(245, 248, 255, 0.25);
          background: rgba(255, 255, 255, 0.002);
          color: rgba(240, 245, 255, 0.95);
        }

        .btn-confirm {
          background: #409EFF;
          border: 1px solid #409EFF;
          color: #141414;
        }
      }
    }
  }
}
</style>
